<template>
  <div id="nav">
    <div class="header">
      <!-- 导航栏 -->
      <MyHeader1></MyHeader1>
      <MyHeader2></MyHeader2>
      <div class="bar">
        <div class="bar-header">
          <router-link to="/city">深圳</router-link>
          <span
            ><img class="bar-img" src="../../assets/img/xiajiantou.png"
          /></span>
        </div>
        <div class="bar-center">
          <router-link to="reying"> 热映 </router-link>
          <router-link to="yingyuan"> 影院 </router-link>
          <router-link to="daiying"> 待映 </router-link>
          <router-link to="jingdian"> 经典电影 </router-link>
        </div>
        <a href="#" class="bar-a"
          ><img src="../../assets/img/fangdajing.png"
        /></a>
      </div>
    </div>
    <div class="movie-con">
      <!-- 设置子路由的路由出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
//引入头部1
// ../../ 相对路径
import MyHeader1 from "@/components/MyHeader1";
// @/ 绝对路径
import MyHeader2 from "@/components/MyHeader2";
export default {
  name: "movie",

  components: {
    MyHeader1,
    MyHeader2,
  },
};
</script>

<style scoped>
/* 头部 样式 */
.bar-center a.router-link-exact-active {
  font-size: 16px;
  font-weight: 800 ;
  border-bottom: 2px solid rgb(229, 72, 71);
  color: #000;
  padding: 3px;
}
.header {
  width: 100%;
  height: 50px;
  background: rgb(229, 72, 71);
  position: fixed;
  top: 0;
  z-index: 999;
}
a {
  text-decoration: none;
  color: #666;
}
.bar {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  background-color: white;
}

.bar-header {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.bar-center {
  display: flex;
  width: 240px;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.bar-center a {
  padding: 0 5px;
}

h2 {
  font-size: 14px;
}

.bar-img {
  width: 10px;
  height: 10px;
  padding-left: 2px;
}

.bar-a {
  width: 20px;
  height: 20px;
  padding: 10px 15px 10px 10px;
}

.bar-a img {
  width: 100%;
  height: 100%;
}
/*scoped 表示 样式只在当前页有效果 */
.movie-con {
  
  margin-top: 158px;
  margin-bottom: 50px;
}
</style>
